<template>
  <dv-border-box-12 class="NurseInformationBox">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span><i class="iconfont icon-shuju7"/></span>
        <div class="d-flex">
          <span class="fs-xl text mx-2" style="font-size:16px">{{title}}</span>
          <span
            style="
              font-size: 16px;
              display: inline-block;
              margin-left:78px;
              margin-right: -1px;
            "
            >{{ randomNumber }}</span
          >
        </div>
      </div>
      <div class="d-flex mt-1 jc-center body-box" style="height:90%;">
        <!-- 显示护士长人数 -->
        <div class="full-width-row">
          <span  @click="handleCellClick('李四')">护士长 (1人):李四</span>
        </div>
        <div class="full-width-row">
          <span  @click="handleCellClick('王五')">副护士长 (1人):王五</span>
        </div>
        <!-- 显示 N0 - N4 -->
        <div v-for="i in 5" :key="i + 1">
          <span>N{{i - 1}} (5人):</span>
          <span v-for="j in 5" :key="`${i + 1}-${j}`">
            <!-- 保存生成的随机姓名 -->
            <template v-if="getAndSaveRandomName">
              <!-- 调用函数并保存结果 -->
              <template v-if="true">
                <!-- 这里用 v-if="true" 模拟一个块级作用域来保存变量 -->
                <template v-for="nameObj in [getAndSaveRandomName()]" :key="nameObj.name">
                  <span 
                    class="person-name" 
                    @click="handleCellClick(nameObj.name)"
                  >{{ nameObj.name }}</span>
                </template>
              </template>
            </template>
          </span>
        </div>
      </div>
    </div>
  </dv-border-box-12>
  <dv-border-box-12
    v-if="dialogVisible"
    class="modal-overlay"
    @click="dialogVisible = false"
  >
    <div class="modal-content" @click.stop>
      <div class="d-flex pt-2 pl-2">
        <div class="d-flex">
          <span><i class="iconfont icon-align-left"></i></span>
          <span class="mx-2">护理人员信息详情</span>
          <span
            class="close-icon"
            @click="handleDialogClose"
            style="
              position: absolute;
              top: 16px;
              right: 10px;
              cursor: pointer;
              font-size: 30px;
              font-weight: 600;
            "
            >×</span
          >
        </div>
      </div>
      <div class="body-box">
        <div class="info-item">
          <span>姓名:</span>
          <span>{{dialogMessage}}</span>
        </div>
        <div class="info-item">
          <span>职工号:</span>
          <span>7270</span>
        </div>
        <div class="info-item">
          <span>性别:</span>
          <span>女</span>
        </div>
        <div class="info-item">
          <span>出生日期:</span>
          <span>1990-06-19</span>
        </div>
        <div class="info-item">
          <span>参加工作时间:</span>
          <span>2009-07-01</span>
        </div>
        <div class="info-item">
          <span>最高学历/毕业院校:</span>
          <span>大学本科/上海交通大学医学院</span>
        </div>
        <div class="info-item">
          <span>基础学历/毕业学校:</span>
          <span>中专/交通大学附属卫生学校</span>
        </div>
        <div class="info-item">
          <span>证书/取得时间:</span>
          <span>中医适任证/2020.10.18</span>
        </div>
      </div>
    </div>
  </dv-border-box-12>
</template>
<script>
import { defineComponent, reactive, ref } from "vue";
// 随机姓名数组
const randomNames = [
  "张三",
  "李四",
  "王五",
  "赵六",
  "孙七",
  "周八",
  "吴九",
  "郑十",
];
export default defineComponent({
  props: {
    title: {
      type: String,
      default: "",
    },
    randomNumber: {
      type: String,
      default: "",
    },
  },
  setup() {
    const data = [];
    // 生成数据
    for (let i = 1; i <= 8; i++) {
      const randomIndex1 = Math.floor(Math.random() * randomNames.length);
      const randomName1 = randomNames[randomIndex1];
      const item1 = `${randomName1}(${i}级)`;
      const randomIndex2 = Math.floor(Math.random() * randomNames.length);
      const randomName2 = randomNames[randomIndex2];
      const item2 = `${randomName2}(${i}级)`;
      const randomIndex3 = Math.floor(Math.random() * randomNames.length);
      const randomName3 = randomNames[randomIndex3];
      const item3 = `${randomName3}(${i}级)`;
      data.push([item1, item2, item3]);
    }

    // 这里的config数据需要调整为胶囊柱图所需的数据格式
    const config = reactive({
      data: [
        {
          name: "病人总数",
          value: 2,
        },
        {
          name: "当日入院",
          value: 4,
        },
        {
          name: "一级护理",
          value: 2,
        },
        {
          name: "二级护理",
          value: 22,
        },
        {
          name: "三级护理",
          value: 13,
        },
        {
          name: "特级护理",
          value: 3,
        },
        {
          name: "病危",
          value: 3,
        },
        {
          name: "病重",
          value: 3,
        },
      ],
      rowNum: 5,
      showValue: true,
    });

    const dialogVisible = ref(false);
    // 模态框显示的信息
    const dialogMessage = ref("");
    const handleCellClick = (name) => {
      if (name !== undefined) {
        // 设置模态框显示的信息
        dialogMessage.value = `姓名：${name}`;
        // 显示模态框
        dialogVisible.value = true;
      }
    };
    const handleDialogClose = () => {
      // 关闭模态框
      dialogVisible.value = false;
    };

    // 生成随机姓名的函数
    const getRandomName = () => {
      const randomIndex = Math.floor(Math.random() * randomNames.length);
      return randomNames[randomIndex];
    };

    // 封装一个函数来获取并保存随机姓名
    const getAndSaveRandomName = () => {
      const name = getRandomName();
      return { name };
    };

    return {
      config,
      handleCellClick,
      dialogVisible,
      dialogMessage,
      handleDialogClose,
      getRandomName,
      getAndSaveRandomName,
    };
  },
});
</script>

<style lang="scss" scoped>
$box-height: 100%;
$box-width: 100%;
.NurseInformationBox {
  padding: 6px;
  height: $box-height;
  width: $box-width;
  .bg-color-black {
    border-radius: 10px;
    width: 100%;
    height: 100%;
  }
  .body-box {
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .body-box > div {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    font-weight: bold;
  }
  .full-width-row {
    width: 100%; // 让这一行宽度占满容器
  }

  /* 后续行样式 */
  .body-box > div{
    flex: 1; /* 正常高度 */
  }
  /* 设置人名之间的间距 */
  .person-name {
    margin-right: 10px; /* 可根据需要调整间距大小 */
  }
  .d-flex.pt-2.pl-2 {
    padding-bottom: 5px; /* 减少底部内边距 */
  }
}
.modal-overlay {
  border-radius: 10px;
  z-index: 9999;
  position: fixed;
  margin: 0 auto;
  padding: 5px;
  top: 30%;
  left: 31%;
  width: 40%;
  height: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #141e30;
  box-sizing: border-box;
  /* 模态框的内容部分 */
  .modal-content {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    .d-flex {
      width: 100%;
      margin-top: 5px;
      border-radius: 10px;
      height: 10%;
      .close-icon {
        color: #909399;
      }
      .close-icon:hover {
        color: #606266;
      }
    }
    .body-box {
      width: 99%;
      height: 88.5% !important;
      margin: 0 auto;
      .info-item {
        width: 80%;
        height: 10%;
        font-size: 20px;
        margin: 0 auto;
      }
      .info-item:not(:first-child) {
        margin-top: 11px;
      }
      .info-item span {
        display: inline-block;
        text-align: left;
      }
      .info-item span:first-child {
        font-weight: bold;
      }
      .info-item span {
        display: inline-block;
        width: 50%;
      }
    }
  }
}
</style>